# 消费变量

## 在节点内获取变量树

### 获取变量列表

```tsx pure title="use-variable-tree.tsx"
import {
  type BaseVariableField,
  useScopeAvailable,
} from '@flowgram.ai/fixed-layout-editor';

// .... Inside react hooks or component

const available = useScopeAvailable()

const renderVariable = (variable: BaseVariableField) => {
  // ....
}

return available.variables.map(renderVariable)

// ....


```

### 获取 Object 类型变量的下钻

```tsx pure title="use-variable-tree.tsx"
import {
  type BaseVariableField,
  ASTMatch,
} from '@flowgram.ai/fixed-layout-editor';

// ....

const renderVariable = (variable: BaseVariableField) => ({
  title: variable.meta?.title,
  key: variable.key,
  // Only Object Type can drilldown
  children: ASTMatch.isObject(type) ? type.properties.map(renderVariable) : [],
});

// ....

```

### 获取 Array 类型变量的下钻

```tsx pure title="use-variable-tree.tsx"
import {
  type BaseVariableField,
  type BaseType,
  ASTMatch,
} from '@flowgram.ai/fixed-layout-editor';

// ....

const getTypeChildren = (type?: BaseType): BaseVariableField[] => {
  if (!type) return [];

  // get properties of Object
  if (ASTMatch.isObject(type)) return type.properties;

  // get items type of Array
  if (ASTMatch.isArray(type)) return getTypeChildren(type.items);
};

const renderVariable = (variable: BaseVariableField) => ({
  title: variable.meta?.title,
  key: variable.key,
  // Only Object Type can drilldown
  children: getTypeChildren(variable.type).map(renderVariable),
});

// ....

```

## 直接使用 VariableSelector 官方物料

详见: [官方表单物料](/guide/advanced/form-materials.html)

<img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>

[VariableSelector](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector/index.tsx) 组件用于选择单个变量

通过包引用使用：

```tsx
import { VariableSelector } from '@flowgram.ai/materials'
```

通过 CLI 复制源代码使用：

```bash
npx @flowgram.ai/materials components/variable-selector
```
